<template>
    <div class="post-master">
        <el-skeleton animated :loading="loading">
            <template #template>
                <div class="loading-style">
                    <el-skeleton style="--el-skeleton-circle-size: 150px;">
                        <template #template>
                            <div class="loading-avater"><el-skeleton-item variant="circle" /></div>
                        </template>
                    </el-skeleton>
                    <el-skeleton-item variant="h1" style="width: 50%; height: 50px" />
                    <el-skeleton-item variant="text" style="width: 80%;" />
                    <el-skeleton-item variant="text" style="width: 80%;" />
                    <el-skeleton-item variant="text" style="width: 80%;" />
                </div>
            </template>
            <template #default>
                <div>
                    <el-avatar :size="150" :src="postmaster.pic" />
                </div>
                <div style="font-size: 30px;font-weight: 300;">{{ postmaster.username }}</div>
                <div class="master-info">
                    <span><el-icon>
                            <IconPark :icon="People" :stroke-width="3" />
                        </el-icon>{{ postmaster.id }}</span>
                    <span><el-icon>
                            <IconPark :icon="Mail" :stroke-width="3" />
                        </el-icon>{{ postmaster.email }}</span>
                    <span><el-icon>
                            <IconPark :icon="Time" :stroke-width="3" />
                        </el-icon>{{ postmaster.createTime }}
                    </span>
                </div>
            </template>
        </el-skeleton>
    </div>
</template>

<script setup lang="ts">
import IconPark from "@components/IconPark.vue";
import { People, Mail, Time } from "@icon-park/vue-next";
import { usePostInfo } from "@store/postinfo";
import { storeToRefs } from "pinia";


const { loading } = defineProps<{
    loading: boolean
}>()
const { postmaster } = storeToRefs(usePostInfo());

</script>

<style scoped lang="less">
.post-master {
    flex: 1;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .loading-style {
        height: 320px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;

        .loading-avater {
            display: flex;
            justify-content: center;
        }
    }
    .master-info {
        display: flex;
        flex-direction: column;
        justify-content: center;

        span {
            display: flex;
            align-items: center;
            margin: 10px 0px;
            font-size: 15px;
            font-weight: 350;

            .el-icon {
                margin: 0 10px;
                color: #2a97d1;
                font-size: 20px;
            }
        }
    }
}
</style>
